<!--表格组件 -->
<template>



  <section class="ces-table-page">


    <vxe-toolbar v-if='this.searchfilter == true'>
      <template #buttons v-if='this.searchfilter == true'>
        <vxe-input v-model="filterName1" type="search" placeholder="全表搜索" @keyup="searchEvent1"></vxe-input>
      </template>
    </vxe-toolbar>

    <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if='isHandle'>
      <el-button v-for='(item, index) in tableHandles' :size="item.size || size" :type="item.type" :icon='item.icon'
        @click="item.handle()" :key="index">{{ item.label }}</el-button>
    </section>
    <!-- 数据表格 -->
    <section class="ces-table">
      <!-- :height="tableHeight" -->
      <!-- :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" -->
      <vxe-table ref="vxeTable" :data='tableData' :border='isBorder' :edit-rules="validRules"
        @selection-change='SelectionChange' @checkbox-change='select' @checkbox-all='selectAll'
        @cell-click='handrowclick' v-loading='loading' header-row-class-name="header_row_style"
        :defaultSelections='defaultSelections' highlight-current-row highlight-hover-row :height="tableHeight"
        :row-config="{ isHover: true }" show-overflow :cell-style="cellStyle" :loading="tableLoading"
        :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName" :checkbox-config="{
          checkMethod: checCheckboxkMethod,
          highlight: true,
          checkField: 'isChecked',
        }" :keep-source="keepSource" id="vxeTable_1" :resizable-config="{
          minWidth: '16',
        }" :scroll-x="{
          enabled: scrollEnable,
        }" :scroll-y="{
          enabled: scrollEnable,
        }" :tree-config="treeConfig" auto-resize resizable :print-config="{}" :show-footer="showFooter"
        :footer-method="footerMethod" size="mini" :column-config="{ useKey: true }">

        <!-- <vxe-column v-if="radio" type="radio" width="40"></vxe-column> -->
        <!-- <vxe-column v-if="check" type="checkbox" width="40"></vxe-column> -->
        <vxe-column type="checkbox" width="50" v-if="isSelection"></vxe-column>
        <vxe-column type="seq" width="60" v-if="IsIndex" title="序号"></vxe-column>
        <!-- <vxe-column v-if="isSelection" type="selection" align="center" width="50"></vxe-column> -->
        <!-- <vxe-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></vxe-column> -->
        <!-- title="<span style='color: red'>操作</span>" type="html" -->
        <vxe-column v-if="IsfunEdit == true || Isfunfail == true" align="center"
          :width="btnName1 != '' ? 150 : widthBton" title="操作" fixed="left">
          <template slot-scope="scope">


            <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName1 != ''"
              @click="handleEdit(scope, btnName1)">{{ btnName1 }}</el-button>


            <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName2 != ''"
              @click="handleEdit(scope, btnName2)">{{ btnName2 }}</el-button>

            <el-button type="primary" size="mini" :width=40 v-if="IsfunEdit == true && btnName3 != ''"
              @click="handleEdit(scope, btnName3)">{{ btnName3 }}</el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" :width=50 v-if="IsfunEdit == true"
              @click="handleEdit(scope)"></el-button>

            <el-button type="danger" size="mini" icon="el-icon-delete" :width=50 v-if="Isfunfail == true"
              @click="handleDelete(scope)"></el-button>

          </template>

        </vxe-column>
        <!-- 数据栏 -->
        <!-- :edit-render="{name:item.IsWrite=='1'?'$input':''}" -->
        <!-- :fixed="item.IsLocked='left'?'left':null" -->
        <!-- title="<span style='color: red'>操作</span>" type="html" -->
        <vxe-column v-for="item in tableCols" :v-show="item.Visible == '1'" :key="item.prop" :field="item.prop"
          :title="(isHandle && item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1 ? Spancolor : '') + item.label"
          type="html" :width="item.width" :align="item.align" show-overflow-tooltip
          :render-header="item.require ? renderHeader : null" style="height:5px" :row-style="iRowStyle"
          :filters="EnableColumnFiltering ? [{ data: '' }] : null" :filter-method="filterMethod"
          :filter-recover-method="filterRecoverMethod"
          :sortable="item.IsOrderBy == '1' || item.IsOrderBy == '2' ? true : false"
          :visible="item.Visible == 'True' ? true : false" show-header-overflow show-overflow="title"
          show-footer-overflow :fixed="item.IsLocked" align="center" tree-node>

          <template #filter="{ $panel, column }" #edit="params">
            <template v-for="(option, index) in column.filters">
              <input class="my-input" type="type" :key="index" v-model="option.data"
                @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()"
                placeholder="按回车确认筛选" style="margin: 10px; height: 30px" />
              <!-- <vxe-input v-model="params.row.name" type="text" @change="changeCellEvent(params)"></vxe-input> -->
            </template>
          </template>


          <vxe-column v-for="childrenitem in item.childrentableCols" :v-show="childrenitem.Visible == '1'"
            :key="childrenitem.prop" :field="childrenitem.prop" :title="childrenitem.label" :width="childrenitem.width"
            :align="childrenitem.align" show-overflow-tooltip
            :render-header="childrenitem.require ? renderHeader : null" style="height:5px" :row-style="iRowStyle"
            :filters="EnableColumnFiltering ? [{ data: '' }] : null" :filter-method="filterMethod"
            :filter-recover-method="filterRecoverMethod"
            :sortable="childrenitem.IsOrderBy == '1' || childrenitem.IsOrderBy == '2' ? true : false"
            :visible="childrenitem.Visible == 'True' ? true : false"
            :edit-render="{ name: childrenitem.IsWrite == '1' ? 'input' : '' }" show-header-overflow
            show-overflow="title" show-footer-overflow :fixed="childrenitem.IsLocked" align="center">
            <template slot-scope="scope">
              <el-input v-show="true"
                v-if="childrenitem.type == 'Input' && isHandle && childrenitem.IsWrite == '1' && childrenitem.WFStepSN.indexOf(StepSN) > -1"
                v-model="scope.row[childrenitem.prop]" size="mini"
                :disabled="childrenitem.IsWrite == '0' ? true : false"
                @keyup.native="handlechange(childrenitem.prop, scope.$index)"
                @focus="childrenitem.focus && childrenitem.focus(scope.row)" :rows="1"></el-input>

              <span v-else>{{ scope.row[childrenitem.prop] }}</span>
            </template>

          </vxe-column>


          <template slot-scope="scope">


            <!--prop="'' + scope.$index + '.'+item.prop" -->
            <!-- <el-form-item :prop="'' + scope.$index + '.' + item.prop" :rules='item.rulesRowDate'  :style="{
                  height:
                    item.type == '26'
                      ? '120px'
                      : item.type == '6'
                      ? '50px'
                      : '11px',
                }"> -->
            <!-- html -->
            <span v-if="item.type === 'Html' && isHandle" v-html="item.html(scope.row)"></span>
            <!-- 按钮 -->
            <span v-else-if="item.type === 'Button' && isHandle">
              <el-button v-for="(btn, index)  in item.btnList" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
                :type="btn.type" size="mini" :icon="btn.icon" :key="index" @click="btn.handle(scope.row)">{{ btn.label
                }}</el-button>
            </span>



            <!-- 输入框 -->
            <el-input v-show="true"
              v-else-if="(item.type == 'Input' || item.type == '39' || item.type == '40') && isHandle && item.IsWrite == '1' && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" size="mini" :disabled="item.IsWrite == '0' ? true : false"
              @keyup.native="handlechange(item.prop, scope.$index)" @focus="item.focus && item.focus(scope.row)"
              :rows="1" @change="updateFooterEvent"></el-input>

            <!-- 颜色 -->
            <el-color-picker v-show="true" v-else-if="item.type == 'ColorPicker'" v-model="scope.row[item.prop]"
              size="mini" :disabled="item.IsWrite == '0' ? true : false"
              @keyup.native="handlechange(item.prop, scope.$index)" @focus="item.focus && item.focus(scope.row)"
              :rows="1"></el-color-picker>



            <el-input type="number" v-else-if="item.type === 'number' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" size="mini" :disabled="item.IsWrite == '0' ? true : false"
              @focus="item.focus && item.focus(scope.row)"></el-input>
            <!-- 下拉框 -->
            <el-select v-else-if="item.type === 'Select'" v-model="scope.row[item.prop]" :min-width="item.width"
              size="mini" :disabled="item.IsWrite == '0' || isHandle == false ? true : false"
              @change='item.change && item.change(scope.row)'>
              <el-option :label="ColsRow.label" :value="ColsRow.value" v-for="ColsRow in item.ColsRowDate"></el-option>
            </el-select>



            <!-- 单选 -->
            <el-radio-group v-else-if="item.type == 'radio'" v-model="scope.row[item.prop]" class="radioEl"
              :style="'width:' + item.width + 'px'" :disabled="item.IsWrite == '0' || isHandle == false ? true : false"
              size="mini">

              <el-radio :label="ColsRow.value" v-model="scope.row[item.prop]" v-for="ColsRow in item.ColsRowDate">{{
                ColsRow.label }}</el-radio>

            </el-radio-group>

            <!-- 开窗 -->
            <el-input v-else-if="item.type == 'buttonopen' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="true" @change='item.change && item.change(scope.row)'
              size="mini" :style="'width:' + item.width + 'px'">
              <el-button size="mini" slot="append" icon="el-icon-search" @click="handleOpen(item.prop, scope.$index)"
                :disabled="item.IsWrite == '0' ? true : false" style="width:9px"></el-button>
            </el-input>



            <el-input-number v-else-if="item.type === 'int' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="item.IsWrite == '0' ? true : false"
              @change='item.change && item.change(scope.row)' size="mini" />

            <el-date-picker v-else-if="item.type === 'datetime' && isHandle && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="item.IsWrite == '0' ? true : false" size="mini"
              lass="date_picker" type="datetime" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
              <v-Getupload v-else-if="item.type == '26'" :rno="item.prop"
              :bill="scope.row[billIDName] + scope.row[IDName]"></v-Getupload>
            <v-Getupload v-else-if="item.type == '6'" uploadType="text" :rno="item.prop"
              :bill="scope.row[billIDName] + scope.row[IDName]"></v-Getupload>
            <!-- 复选框 -->
            <el-checkbox-group size="mini" v-else-if="item.type === 'Checkbox' && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
              @change='item.change && item.change(scope.row)'>
              <el-checkbox v-for="(ra, index) in item.checkboxs" :label="ra.value" :key="index">{{ ra.label
                }}</el-checkbox>
            </el-checkbox-group>
            <!-- 评价 -->
            <el-rate size="mini" v-else-if="item.type === 'Rate' && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
              @change='item.change && item.change(scope.row)'></el-rate>
            <!-- 开关 -->
            <el-switch size="mini" v-else-if="item.type === 'Switch' && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
              @change='item.change && item.change(scope.row)'></el-switch>
            <!-- 图像 -->
            <img v-else-if="item.type === 'Image' && item.WFStepSN.indexOf(StepSN) > -1" :src="scope.row[item.prop]"
              @click="item.handle && item.handle(scope.row)" />
            <!-- 滑块 -->
            <el-slider size="mini" v-else-if="item.type === 'Slider' && item.WFStepSN.indexOf(StepSN) > -1"
              v-model="scope.row[item.prop]" :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
              @change='item.change && item.change(scope.row)'></el-slider>
            <!-- 默认 -->
            <span v-else type="html">{{ scope.row[item.prop] }}</span>
            <!-- </el-form-item> -->

            <!--   </el-form> -->

          </template>
        </vxe-column>



      </vxe-table>

    </section>
    <!-- 分页 -->
    <section class="ces-pagination" v-if='isSearch'>
      <div class="sytId" @click="moveToSys">ID：{{ Search.InterID }}</div>

      <el-pagination small style='display: flex;justify-content: center;height: 100%;align-items: center;' background
        @current-change="handleCurrentChange" @size-change="handleSizeChange"
        layout="total,sizes ,prev, pager, next,jumper" :page-sizes="pagesizes" :page-size="Search.pageSize"
        :current-page="Search.page" :total="Search.total"></el-pagination>
    </section>
  </section>
</template>

<script>
import vGetupload from "../Common/Getupload";
import XEUtils from 'xe-utils';
export default {
  components: {
    vGetupload
  },
  props: {
    pagesizes: { type: Array, default: [100, 200, 500, 1000] },
    widthBton: { type: String, default: 120 },
    check: { type: Boolean, default: false },
    // 表格型号：mini,medium,mini
    size: { type: String, default: 'medium' },
    height: { type: String, default: 'medium' },

    isBorder: { type: Boolean, default: true },
    loading: { type: Boolean, default: false },
    // 表格操作
    isHandle: { type: Boolean, default: false },

    isHandleEdit: { type: Boolean, default: false },

    tableHandles: { type: Array, default: () => [] },
    //全量过虑
    searchPropsDate: { type: Array, default: () => [] },
    // 表格数据
    tableData: { type: Array, default: () => [] },
    // 表格列配置
    tableCols: { type: Array, default: () => [] },

    validRules: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    defaultSelections: { type: [Array, Object], default: () => null },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 是否显示分页
    isSearch: { type: Boolean, default: true },

    searchfilter: { type: Boolean, default: false },

    WFStepSN: { type: String, default: '' },
    //  tableData:{type:String,default:''},

    StepSN: { type: String, default: '-1' },

    refs: { type: String, default: '-1' },
    // 分页数据
    Search: { type: Object, default: () => ({ pageSize: 100, page: 1, total: 0 }) },

    //是否有编辑权限
    IsfunEdit: { type: Boolean, default: false },
    //是否有作废权限
    Isfunfail: { type: Boolean, default: false },
    //是否100%高度
    Isheight: { type: Boolean, default: true },

    tableHeight: { type: String, default: '' },
    billIDName: { type: String, default: "" }, //主键名称  用于上传附件用

    IDName: { type: String, default: "" }, //主键名称  用于上传附件用
    IsUseLockColumn: { type: Boolean, default: false },
    ToolBarheight: { type: Number, default: 200 },
    btnName1: { type: String, default: '' },
    btnName2: { type: String, default: '' },
    btnName3: { type: String, default: '' },
    Spancolor: { type: String, default: "<span style='color: red'>* </span>" }, //必输标识 *

    //虚拟滚动
    scrollEnable: {
      type: Boolean,
      default: true,
    },
    // 懒加载
    keepSource: {
      type: Boolean,
      default: false,
    },
    // 传行内列样式
    cellStyle: {
      type: Function,
      default: function ({ row, column }) {
        let style = {}; // 创建一个空的样式对象
        const key = column.property;

        let BColors = row['BColors'];
        let FColors = row['FColors'];

        // debugger


        if (
          Object.prototype.toString.call(row['FColors']) ===
          '[object Object]' &&
          key in FColors
        ) {
          style.color = FColors[key]; // 设置文本颜色
        }
        if (
          Object.prototype.toString.call(row['BColors']) ===
          '[object Object]' &&
          key in BColors
        ) {
          style.backgroundColor = BColors[key]; // 设置背景颜色
        }
        return style; // 返回样式对象
      },
    }, // 行样式
    tableRowClassName: {
      type: Function,
      default: () => {
        return null;
      },
    },
    // 控制选框条件
    checCheckboxkMethod: {
      type: Function,
      default: () => {
        return true;
      },
    },
    treeConfig: {
      type: Object,
      default() {
        return null;
      },
    },
    // 是否开启列筛选
    EnableColumnFiltering: {
      type: Boolean,
      default: true,
    },
    // 筛选条件
    // filterMethod({ option, row, column }) {
    //   if (option.data) {
    //     if (row[column.property]) {
    //       return JSON.stringify(row[column.property]).includes(option.data);
    //     }
    //   }
    // },
    //  filterRecoverMethod({ option }) {
    //   // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
    //   option.data = '';
    // }, 
    IsIndex: {
      type: Boolean,
      default: false,
    },
    // 是否显示底部合计
    showFooter: {
      type: Boolean,
      default: false,
    }, dataFooter: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 合计包含哪些字段
    includeFields: {
      type: Array,
      default: function () {
        return [];
      },
    },  // 是否要合并
    isSpanMethods: {
      type: Boolean,
      default: false,
    },// 固定合并列显示
    fixSpanMethods: {
      type: Boolean,
      default: false,
    },
    zoom: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      wide: null,
      list1: [],
      filterName: '',
      // validRules: {
      //   Range: [
      //     { required: true, message: '请输入' },
      //     // { validator: nameValid }
      //   ],
      //   Term: [
      //   { required: true, message: '请输入' },
      //   ]
      // }


    }
  }, created() {

    this.searchEvent1()
  },
  mounted() {






    setTimeout(() => {

      if (this.isHandle == false) {
        this.tableHeight = window.innerHeight - this.ToolBarheight + "px";
      }

      if (this.ToolBarheight != 200) {
        this.tableHeight = document.documentElement.clientHeight - this.ToolBarheight
      }
      window.addEventListener('resize', (event) => {
        if (this.ToolBarheight != 200 && this.zoom) {
          this.tableHeight = document.documentElement.clientHeight - this.ToolBarheight
        }
      })



      // 
    }, 150);

    // let tab = document.querySelector('.table')

    // setTimeout(() => {
    //   tab.style.height = this.tableData.length <= 5 && this.isHandle == true ? '350px' : '100%'
    // }, 150);



  },
  watch: {




    tableCols: {
      handler(newValue, oldValue) {

        if ((this.isSpanMethods || this.fixSpanMethods) && this.tableCols) {
          this.header();
        }

        this.$set(this, 'tableCols', newValue);
        this.includeFields = [];
        this.searchPropsDate = [];
        this.treeConfig = [];

        let rowField = "";
        let parentField = "";




        //合计
        for (let v of this.tableCols) {

          if (v.AllowTotal == '1') {
            //  debugger
            this.includeFields.push(v.prop);
            this.showFooter = true;
          }

          if (v.IsSearch == '1') {
            this.searchPropsDate.push(v.prop);
          }

          if (v.type == '39') {
            rowField = v.prop
          } else if (v.type == '40') {
            parentField = v.prop
          }

        }
        // debugger
        if (rowField != "") {
          this.treeConfig = {
            transform: true,
            rowField: rowField,
            parentField: parentField,
            expandAll: true
          };

        }




      },
      deep: true,
    }, height: {
      handler(newValue, oldValue) {
        this.$set(this, 'height', newValue);
      },
      // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
      immediate: true,
      deep: true,
    },
    tableData() {
      if (this.tableData) {
        let vxe = this.$refs.vxeTable
        if (vxe) {
          vxe.loadData(this.tableData); //加载数据
        }
      }

    },
    ToolBarheight: function (newVal, oldVal) {
      this.tableHeight = document.documentElement.clientHeight - newVal
      // debugger 
    }
  },

  methods: {
    // changeCellEvent(params) {
    //   const $table = this.$refs.tableRef
    //   if ($table) {
    //     $table.updateStatus(params)
    //   }
    // },
    moveToSys() {
      this.$router.push(`/System/PageAutoForm?billID=${this.Search.InterID}&IsPostBack=${false}`)
    },


    filterMethod({ option, row, column }) {
      if (option.data) {
        if (row[column.property]) {
          return JSON.stringify(row[column.property]).includes(option.data);
        }
      }
    },
    filterRecoverMethod({ option }) {
      // 如果是自定义筛选模板，当为点击确认时，该选项将被恢复为默认值
      option.data = '';
    },
    toggleSelection(val) {


      if (Array.isArray(val)) {
        val.forEach(row => {
          this.$refs.cesTable.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.cesTable.toggleRowSelection(val)
      }


    },
    // 表格勾选
    select(rows) {
      const currentPageCheckedRecords = this.$refs.vxeTable.getCheckboxRecords()
      // debugger
      this.$emit('select', currentPageCheckedRecords, rows.row);
    },
    // 全选
    selectAll(rows) {
      const currentPageCheckedRecords = this.$refs.vxeTable.getCheckboxRecords()
      // debugger
      // self.selectList = rows
      // row = rows[0];
      this.$emit('selectAll', currentPageCheckedRecords, rows.row)
    },
    SelectionChange(val) {

      self.selectList = val
      this.$emit('SelectionChange', val);
    },
    // 
    handleCurrentChange(val) {
      this.Search.page = val;

      this.$emit('refresh');
    },
    handleSizeChange(val) {
      this.Search.pageSize = val;

      this.$emit('refresh');
    },


    handleEdit(scope, type) { // 修改
      this.$emit('handleEdit', scope, type);

    },

    handrowclick(scope) { // 修改


      this.$emit('handrowclick', scope);

    },



    handleDelete(scope) { // 修改



      this.$emit('handleDelete', scope);

    }, handleOpen(Name, index) { // 修改


      this.$emit('handleOpen', Name, index);

    },
    handlechange(Name, index) { // 修改


      this.$emit('handlechange', Name, index);

    },

    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      let className = '';
      return className;
    },

    pickerOptions(val) {
    },
    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', { class: 'ces-table-require' }, obj.column.label)
    },
    iRowStyle: function ({ row, rowIndex }) {
      return 'height:5px';
    },

    async validateForm() {
      let flag = null

      const $table = this.$refs.vxeTable

      const errMap = await $table.validate(true)


      if (errMap) {
        flag = true
      } else {
        flag = false
      }

      return flag
    },
    // 底部合计栏
    footerMethod({ columns, data }) {



      let footerData = [];
      if (this.showFooter) {
        if (this.includeFields && this.includeFields.length > 0) {
          footerData = [
            columns.map((column, columnIndex) => {
              if (columnIndex === 0) {
                return '合计';
              }
              let s = JSON.stringify(this.includeFields);

              if (this.includeFields.includes(column.property)) {

                return XEUtils.sum(data, column.property);
              }
              return null;
            }),
          ];
        }
        if (this.dataFooter && this.dataFooter.length > 0) {
          function getValues(columns, data) {
            const result = [];
            columns.map((column) => {
              if (column.children) {
                const childValues = getValues(column.children, data);
                result.push(...childValues);
              } else if (column.prop in data) {
                result.push(data[column.prop]);
              }
            });

            return result;
          }
          footerData = [getValues(this.tableHeaderChange, this.dataFooter[0])];
          // footerData = footerData.concat([
          //   this.tableHeaderChange.map((column) => {
          //     const key = column.prop;
          //     let value = null;
          //     console.log(column, 'column');
          //     if (column.children && column.children.length > 0) {
          //       column.children.map((column) => {
          //         let value = null;
          //         const key = column.prop;
          //         this.dataFooter.forEach((footerItem) => {
          //           if (footerItem.hasOwnProperty(key)) {
          //             value = footerItem[key];
          //           }
          //         });
          //         return value;
          //       });
          //     } else {
          //       this.dataFooter.forEach((footerItem) => {
          //         if (footerItem.hasOwnProperty(key)) {
          //           value = footerItem[key];
          //         }
          //       });
          //       return value;
          //     }
          //   }),
          // ]);
        }
      }
      return footerData;
    }, updateFooterEvent() {
      const $table = this.$refs.vxeTable
      $table.updateFooter()
    },

    searchEvent1() {

      const filterName = XEUtils.toValueString(this.filterName1).trim().toLowerCase()
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi')
        const searchProps = this.searchPropsDate
        const rest = this.tableData.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1))
        this.list1 = rest.map(row => {
          const item = Object.assign({}, row)
          searchProps.forEach(key => {
            debugger
            item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `${match}`)
          })
          return item
        })
      } else {
        this.list1 = this.tableData
      }
      let vtable = this.$refs.vxeTable
      if (vtable) vtable.loadData(this.list1); //加载数据
    }

  },
  // tableRowClassName({ row, rowIndex }) {
  //   let self = this
  //   for (let i = 0; i < self.selectList.length; i++) {
  //     if (rowIndex === self.selectList[i]) {
  //       return 'warning-row';
  //     }
  //   }

  // },
}
</script>
<style lang="scss">
/* .ces-table{
  /deep/ .row--current{
    background-color: #78fff7 !important;
  }
} */
.radioEl {
  transform: translateX(-20px);

  .el-radio {
    margin-right: 17px !important;
  }
}


.sytId {
  display: inline-block;
  font-size: 14px;
  color: rgb(8, 8, 198);
  padding-top: 3px;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}

::-Gecko-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}

::-Gecko-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -Gecko-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc;
}

::-Gecko-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}



.el-pagination {
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}





.toolbar {
  position: absolute;
  /* width: 100px; */
  z-index: 99;
  height: 30px;
  left: 110px;
  top: 6px;
  background: rgba(0, 0, 0, 0);
}

::v-deep .vxe-button.type--button {
  height: 30px !important;
}

::v-deep .vxe-button.type--button.is--circle {
  min-width: 30px !important;
}

::v-deep .vxe-toolbar .vxe-custom--option-wrapper {
  bottom: 0;
  left: 50px;
  right: auto;
}

/* //表位行高 */
::v-deep .vxe-footer--row {
  height: 35px;
}

/* //表头底色 */
::v-deep .vxe-header--row {
  background-color: #f3f3f3;
}

/* //表头底部线 */
::v-deep .vxe-table--header-border-line {
  border-bottom: 1px solid #b9b9b9 !important;
}

/* //列表边框线宽度和颜色 */
::v-deep .vxe-table--render-default.border--full .vxe-body--column {
  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc);
  /* // background-size: 2px 100%, 100% 2px; */
}

/* //列表表头表尾线宽度和颜色 */
::v-deep .vxe-table--render-default.border--full .vxe-header--column,
.vxe-table--render-default.border--full .vxe-footer--column {
  background-image: linear-gradient(#b9b9b9, #b9b9b9),
    linear-gradient(#b9b9b9, #b9b9b9);

}

.el-select {
  width: 100%;
}

.keyword-lighten {
  color: #000;
  background-color: #FFFF00;
}
</style>